<template>
  <div class="randoms-container">
    <el-card class="box-card">
      <!-- 表单-->
      <div class="box">
        <el-form
          ref="subjectForm"
          :inline="true"
          :model="reqParams"
          label-width="80px"
          size="small"
          class="randomForm"
        >
          <!-- 左侧 -->
          <div class="ipt">
            <el-form-item label="关键字">
              <el-input
                size="small"
                placeholder="根据编号搜索"
                v-model="reqParams.keyword"
                style="width: 335px"
              ></el-input>
            </el-form-item>
          </div>
          <!-- 右侧 -->
          <div class="grid-content" style="text-align: right">
            <el-button size="small" @click="remove">清除</el-button>
            <el-button type="primary" size="small" @click="search"
              >搜索</el-button
            >
          </div>
        </el-form>
      </div>
      <!-- 提示 -->
      <el-alert :title="`数据一共 ${total} 条`" type="info" show-icon>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="subjectLists" style="margin: 15px 0">
        <el-table-column label="编号" prop="id" width="200px"></el-table-column>
        <el-table-column label="题型" prop="questionType" width="90px">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.questionType === '1'
                  ? '单选'
                  : scope.row.questionType === '2'
                  ? '多选'
                  : '简答'
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="题目编号" width="230px" prop="questionIDs">
          <template slot-scope="scope">
            <div
              v-for="(item1, index) in scope.row.questionIDs"
              :key="index"
              class="color"
              @click="previewOpen(item1.id)"
            >
              {{ item1.number }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          prop="addTime"
          width="190px"
        ></el-table-column>
        <el-table-column
          label="答题时间(s)"
          prop="totalSeconds"
          width="310px"
        ></el-table-column>
        <el-table-column
          label="正确率(%)"
          prop="accuracyRate"
        ></el-table-column>
        <el-table-column label="录入人" prop="userName"></el-table-column>
        <el-table-column label="操作" width="220px">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              plain
              circle
              title="删除"
              @click="removeQuestions(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          style="text-align: right"
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="reqParams.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="reqParams.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 弹出层 -->
      <el-dialog
        title="题目预览"
        :visible.sync="dialogVisible"
        width="900px"
        :before-close="handleClose"
      >
        <div class="top">
          <el-row class="distance">
            <el-col :span="6"
              ><div class=" bg-purple">
                <span>【题型】：</span>
                <span>{{ questionType }}</span>
              </div></el-col
            >
            <el-col :span="6"
              ><div class=" bg-purple">
                <span>【编号】：</span>
                <span> {{ data.id }}</span>
              </div></el-col
            ><el-col :span="6"
              ><div class=" bg-purple">
                <span>【难度】：</span>
                <span> {{ difficulty }}</span>
              </div></el-col
            ><el-col :span="6"
              ><div class=" bg-purple">
                <span>【标签】：</span>
                <span>{{ data.tags }}</span>
              </div></el-col
            >
          </el-row>
          <el-row class="distance">
            <el-col :span="6"
              ><div class=" bg-purple">
                <span>【学科】：</span>
                <span>{{ data.subjectName }}</span>
              </div></el-col
            >
            <el-col :span="6"
              ><div class=" bg-purple">
                <span>【目录】：</span>
                <span>{{ data.directoryName }}</span>
              </div></el-col
            ><el-col :span="6"
              ><div class=" bg-purple">
                <span>【方向】：</span>
                <span>{{ data.direction }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <!-- 水平线 -->
        <hr />
        <!-- 题干 -->
        <p>【题干】：</p>
        <p class="questionColor" v-html="data.question"></p>
        <div v-if="data.questionType == '1' || data.questionType == '2'">
          <div>
            <span>{{ questionType }}</span> &nbsp;
            <span>选项：</span>&nbsp;&nbsp; (以下选中的选项为正确答案)
          </div>

          <!-- 单选多选-->
          <el-radio-group v-model="radio" @change="radio = 1">
            <el-radio
              v-for="(item, index) in data.options"
              :key="index"
              :label="item.isRight"
              style="width:100% ; margin :10px"
              >{{ item.title }}</el-radio
            >
          </el-radio-group>
        </div>

        <!-- 简答 -->
        <hr />
        <div>
          <span>【参考答案】：</span>
          <el-button @click="vidio = true" type="danger" size="small"
            >视频答案预览</el-button
          >
          <div style="margin: 5px;" v-if="vidio && data.videoURL">
            <video
              :src="data.videoURL"
              width="320"
              height="240"
              autoplay
              muted
              controls="controls"
            ></video>
          </div>
          <hr />
          <div style="display: inline-block">
            <span>【答案解析】：</span>
            <span v-html="data.answer"></span>
          </div>
          <hr />
          <span>【题目备注】： <span v-html="data.remarks"></span> </span>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >关 闭</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
export default {
  name: 'QuestionsRandoms',

  data() {
    return {
      // 传参
      reqParams: {
        page: 1, // 当前页
        pagesize: 10, // 每页条数
        keyword: null // 关键字
      },
      total: 0, // 总条数
      subjectLists: [], // 学科列表
      dialogVisible: false, // 弹出层
      data: {}, // 弹框数据
      radio: 1, // 多选
      checkList: [], // 单选
      vidio: false //视频显示与否
    }
  },

  created() {
    this.randomsList()
  },
  methods: {
    // 分页
    handleCurrentChange(currentPage) {
      this.reqParams.page = currentPage
      this.randomsList()
    },
    handleSizeChange(currentSize) {
      // 每次改变每页条数都需要把当前页赋值为第一页
      this.reqParams.page = 1
      this.reqParams.pagesize = currentSize
      this.randomsList()
    },
    // 获取数据
    async randomsList() {
      try {
        const { data } = await randoms(this.reqParams)
        console.log(data)
        this.total = data.counts
        this.subjectLists = data.items
      } catch (err) {}
    },

    // 搜索
    async search() {
      await randoms(this.reqParams)
      this.randomsList()
    },
    // 清除输入内容
    remove() {
      // this.$refs.subjectForm.resetFields()
      this.reqParams.keyword = ''
      this.randomsList()
    },
    // 根据id删除对应数据
    async removeQuestions(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      if (confirmResult === 'confirm') {
        await removeRandoms({ id })
        this.randomsList()
        this.$message.success('已删除成功')
      }
    },

    // 打开预览弹出层
    async previewOpen(id) {
      try {
        const { data } = await detail({ id })
        console.log(data.options)
        this.data = data
        this.dialogVisible = true
      } catch (err) {
        console.log(err)
      }
    },
    // 弹出层关闭
    handleClose(done) {
      this.dialogVisible = false
    }
  },

  computed: {
    // 题型
    questionType() {
      if (this.data.questionType == 1) {
        return '单选题'
      } else if (this.data.questionType == 2) {
        return '多选题'
      } else {
        return '简答题'
      }
    },
    // 难度
    difficulty() {
      if (this.data.difficulty == 1) {
        return '简单'
      } else if (this.data.difficulty == 2) {
        return '一般'
      } else {
        return '困难'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.randoms-container {
  padding: 0 10px;
  margin: 10px 0;
}
.ipt {
  float: left;
}
.grid-content {
  float: right;
}
.color {
  color: #0099ff;
}
.distance {
  padding: 10px 0;
}
.questionColor {
  color: #0000ff;
}
.label.el-radio {
  margin: 10px;
}
::v-deep .el-dialog__footer {
  text-align: right !important;
}
</style>
